<html>
<head>
  <script src="../OLLoader.js"></script>
  <script type="text/javascript">
    function test_Control_Panel_constructor (t) {
        t.plan( 2 );
    
        control = new OpenLayers.Control.Panel();
        t.ok( control instanceof OpenLayers.Control.Panel, "new OpenLayers.Control returns object" );
        t.eq( control.displayClass,  "olControlPanel", "displayClass is correct" );
    }
    function test_Control_Panel_constructor2 (t) {
        t.plan(19);
        var map = new OpenLayers.Map('map');
        var toolControl = new OpenLayers.Control.ZoomBox();
        var AnotherToolControl = OpenLayers.Class(OpenLayers.Control, {
              CLASS_NAME: 'mbControl.TestTool',
              type: OpenLayers.Control.TYPE_TOOL
        });
        var anotherToolControl = new AnotherToolControl();
        var ToggleControl = OpenLayers.Class(OpenLayers.Control, {
              CLASS_NAME: 'mbControl.TestToggle',
              type: OpenLayers.Control.TYPE_TOGGLE
        });

        var toggleControl = new ToggleControl();
        var buttonControl = new OpenLayers.Control.Button({
            trigger: function () {
                t.ok(true, "trigger function of button is called.");
            }
        });

        var panel = new OpenLayers.Control.Panel(
            {defaultControl: anotherToolControl});
        t.ok(panel instanceof OpenLayers.Control.Panel,
              "new OpenLayers.Control.Panel returns object");
        panel.redraw = function(){
            panel.redrawsCount++;
            OpenLayers.Control.Panel.prototype.redraw.apply(this, arguments);
        };

        // To get length of events.listeners error-free
        var getListenerLength= function(events,key){
            if(!events) {
                return -2; // events is destroyed
            } else if(!events.listeners) {
                return -1; // events is destroyed
            } else if(!events.listeners[key]) {
                return 0; // no listener in event
            } else {
                return events.listeners[key].length;
            }
        };
        var toolEventListenerLength = getListenerLength(toolControl.events,"activate");
        panel.addControls([toolControl, anotherToolControl, toggleControl]);
        t.eq(panel.controls.length, 3,
              "added three controls to the panel");
        panel.addControls([buttonControl]);

        panel.redrawsCount = 0;
        map.addControl(panel);
        t.eq(getListenerLength(toolControl.events,"activate"), toolEventListenerLength+1,
            "toolControl additional listener for \"activate\" after adding Panel to the map.");
        t.ok((panel.redrawsCount > 0), "Redraw called on add panel to map " +
            panel.redrawsCount + " times.");
        t.ok((panel.active),"Panel is active after add panel to map.");

        panel.redrawsCount = 0;
        panel.addControls(new AnotherToolControl());
        t.ok((panel.redrawsCount > 0),
            "Redraw called on add control to panel after add panel to map " +
            panel.redrawsCount + " times.");

        panel.deactivate();
        panel.redrawsCount = 0;
        panel.activate();
        t.ok((panel.redrawsCount > 0),"Redraw called on activate panel " +
            panel.redrawsCount + " times.");

        panel.activateControl(toolControl);
        t.ok(toolControl.active && !anotherToolControl.active && !toggleControl.active && !buttonControl.active,
              "activated one tool control, the other one is inactive and the toggle & button controls also.");

        panel.activateControl(toggleControl);
        t.eq(toggleControl.panel_div.className,"mbControlTestToggleItemActive olButton",
            "className of icon div for toggle control is active.");
        t.ok(toolControl.active && !anotherToolControl.active && toggleControl.active,
              "activated the toggle control, which has no influence on the tool & togggle controls.");
        panel.activateControl(buttonControl);
        t.ok(toolControl.active && !anotherToolControl.active && toggleControl.active,
              "activateContol calling for button, which has no influence on the tool & togggle controls.");
        t.ok(!buttonControl.active,
              "activateContol calling for button, button remains inactive.");
        buttonControl.activate();
        t.ok(buttonControl.active && toolControl.active && !anotherToolControl.active && toggleControl.active,
              "activated the button control, which has no influence on the tool & togggle controls.");

        panel.activateControl(anotherToolControl);
        t.eq(anotherToolControl.panel_div.className,"mbControlTestToolItemActive olButton",
            "className of icon div for anotherToolControl is active.");
        t.eq(toolControl.panel_div.className,"olControlZoomBoxItemInactive olButton",
            "className of icon div for toolControl is inactive.");
        t.ok(!toolControl.active && anotherToolControl.active && toggleControl.active,
              "activated the other tool control, the first one is inactive and the toggle control still active.");
        t.ok(buttonControl.active,
              "activated the other tool control, the button control still active.");

        panel.destroy();
        t.eq(getListenerLength(toolControl.events,"activate"), toolEventListenerLength,
            "toolControl additional listeners removed after destroy Panel.");
        map.destroy();
    }
    function test_Control_Panel_titles (t) { 
        t.plan(2); 
        var panel = new OpenLayers.Control.Panel(); 
        var toolControl = new OpenLayers.Control.ZoomBox({ 
            title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging." 
        }); 
        panel.addControls([toolControl]); 
        t.eq(panel.controls.length, 1, "added a control to the panel"); 
        t.eq(panel.controls[0].title, toolControl.panel_div.title, "the title is correctly set"); 
    } 
    
    function test_Control_Panel_getBy(t) {
        
        var panel = {
            getBy: OpenLayers.Control.Panel.prototype.getBy,
            getControlsBy: OpenLayers.Control.Panel.prototype.getControlsBy,
            controls: [
                {foo: "foo", id: Math.random()},
                {foo: "bar", id: Math.random()},
                {foo: "foobar", id: Math.random()},
                {foo: "foo bar", id: Math.random()},
                {foo: "foo", id: Math.random()}
            ]
        };

        var cases = [
            {
                got: panel.getControlsBy("foo", "foo"),
                expected: [panel.controls[0], panel.controls[4]],
                message: "(string literal) got two controls matching foo"
            }, {
                got: panel.getControlsBy("foo", "bar"),
                expected: [panel.controls[1]],
                message: "(string literal) got one control matching foo"
            }, {
                got: panel.getControlsBy("foo", "barfoo"),
                expected: [],
                message: "(string literal) got empty array for no foo match"
            }, {
                got: panel.getControlsBy("foo", /foo/),
                expected: [panel.controls[0], panel.controls[2], panel.controls[3], panel.controls[4]],
                message: "(regexp literal) got three controls containing string"
            }, {
                got: panel.getControlsBy("foo", /foo$/),
                expected: [panel.controls[0], panel.controls[4]],
                message: "(regexp literal) got three controls ending with string"
            }, {
                got: panel.getControlsBy("foo", /\s/),
                expected: [panel.controls[3]],
                message: "(regexp literal) got control containing space"
            }, {
                got: panel.getControlsBy("foo", new RegExp("BAR", "i")),
                expected: [panel.controls[1], panel.controls[2], panel.controls[3]],
                message: "(regexp object) got layers ignoring case"
            }, {
                got: panel.getControlsBy("foo", {test: function(str) {return str.length > 3;}}),
                expected: [panel.controls[2], panel.controls[3]],
                message: "(custom object) got controls with foo length greater than 3"
            }
        ];
        t.plan(cases.length);
        for(var i=0; i<cases.length; ++i) {
            t.eq(cases[i].got, cases[i].expected, cases[i].message);
        }


    }
    
    function test_Control_Panel_saveState (t) { 
        t.plan(11); 
        var map = new OpenLayers.Map('map');

        var defaultControl = new OpenLayers.Control();
        var panel = new OpenLayers.Control.Panel({
            defaultControl: defaultControl
        });
        panel.addControls([new OpenLayers.Control(), defaultControl]);
        map.addControl(panel);
        t.eq(defaultControl.active, true,
            "After panel activation default control is active.");    
        t.ok(panel.defaultControl,
            "defaultControl not nullified after initial panel activation");          
        // activate the 1st control
        panel.activateControl(panel.controls[0]);
        panel.deactivate();      
        t.ok(!panel.controls[0].active && !panel.controls[1].active,
            "No controls are active after panel deactivation.");
        panel.activate();   
        t.eq(panel.controls[0].active, false,
            "After panel reactivation first control is inactive.");              
        t.eq(panel.controls[1].active, true,
            "After panel reactivation default control is active again.");
        panel.destroy();

        defaultControl = new OpenLayers.Control();
        panel = new OpenLayers.Control.Panel({
            saveState: true,
            defaultControl: defaultControl
        });
        panel.addControls([new OpenLayers.Control(), defaultControl]);
        map.addControl(panel);
        t.eq(defaultControl.active, true,
            "After panel activation default control is active.");    
        t.eq(panel.defaultControl, null,
            "defaultControl nullified after initial panel activation");          
        // activate the 1st control, which will deactivate the 2nd
        panel.activateControl(panel.controls[0]);
        t.eq(panel.controls[1].active, false,
            "2nd control deactivated with activation of 1st");
        panel.deactivate();      
        t.ok(!panel.controls[0].active && !panel.controls[1].active,
            "No controls are active after panel deactivation.");
        panel.activate();   
        t.eq(panel.controls[0].active, true,
            "After panel reactivation first control is active.");
        t.eq(panel.controls[1].active, false,
            "After panel reactivation second control is inactive.");              
        panel.destroy();
        map.destroy();
    } 

    function test_Control_Panel_autoActivate (t) {
        t.plan(1);
        var map = new OpenLayers.Map('map');
        var controlNoDeactive = new OpenLayers.Control({autoActivate:true});
        var chkDeactivate = function () {
            t.ok(false, "Tool control autoActivate:true was deactivated unnecessarily");
        };
        controlNoDeactive.events.on({deactivate: chkDeactivate});
        var panel = new OpenLayers.Control.Panel();
        
        map.addControl(panel);
        panel.addControls([controlNoDeactive]);
        controlNoDeactive.events.un({deactivate: chkDeactivate});
        t.ok(!controlNoDeactive.active, "Tool control autoActivate:true is not active");
        
    }

    function test_Control_Panel_deactivate (t) {
        t.plan(2);
        var map = new OpenLayers.Map('map');
        var control = new OpenLayers.Control();
        var panel = new OpenLayers.Control.Panel();        
        map.addControl(panel);
        panel.addControls([control]);        
        t.ok(panel.div.innerHTML != "", "Panel displayed after activate");        
        
        panel.deactivate();
        t.ok(panel.div.innerHTML == "", 
            "Panel is not displayed after deactivate without any active control");

        map.destroy();
    }

    function test_allowDepress (t) { 
        t.plan(2); 
        var map = new OpenLayers.Map('map');

        var panel = new OpenLayers.Control.Panel();
        panel.addControls([new OpenLayers.Control(),new OpenLayers.Control()]);
        map.addControl(panel);
        
        var control1 = panel.controls[1]
        
        panel.activateControl(control1);
        
        panel.allowDepress = false;
        panel.activateControl(control1);
        t.eq(control1.active, true,
            "control1 remains active after calling again activateControl when allowDepress = false");
        panel.allowDepress = true;
        panel.activateControl(control1);
        t.eq(control1.active, false,
            "control1 is inactive after calling again activateControl when allowDepress = true");

        // panel.deactivate();
        map.destroy();
    }

    function test_iconOn_iconOff(t) {
        t.plan(2);

        var map = new OpenLayers.Map('map');

        var panel = new OpenLayers.Control.Panel();
        var ctrl = new OpenLayers.Control({displayClass: 'ctrl'});
        panel.addControls([ctrl]);

        map.addControl(panel);

        // add arbitrary classes to the panel div - we want to test
        // than iconOn and iconOff do their jobs even when the panel
        // div has application-specific classes.

        ctrl.panel_div.className =
            'ctrlItemInactive fooItemActive fooItemInactive';

        panel.iconOn.call(ctrl);
        t.eq(ctrl.panel_div.className,
             'ctrlItemActive fooItemActive fooItemInactive',
             'iconOn behaves as expected');

        ctrl.panel_div.className =
            'ctrlItemActive fooItemActive fooItemInactive';

        panel.iconOff.call(ctrl);
        t.eq(ctrl.panel_div.className,
             'ctrlItemInactive fooItemActive fooItemInactive',
             'iconOff behaves as expected');

        map.destroy();
    }
    
    function test_buttonclick(t) {
        t.plan(4);
        var map = new OpenLayers.Map('map');
        var panel1 = new OpenLayers.Control.Panel();
        var div = document.createElement("div");
        var panel2 = new OpenLayers.Control.Panel({div: div});
        map.addControls([panel1, panel2]);
        
        t.ok(map.events.listeners.buttonclick, "buttonclick event registered on map's Events instance for panel inside map");
        t.ok(!panel1.events.element, "Panel inside map has no element on its Events instance");
        t.ok(panel2.events.listeners.buttonclick, "buttonclick event registered on panel's Events instance if outside map")
        t.ok(panel2.events.element === div, "Panel outside map has the panel's div as element on its Events instance");
        
    }
    
    function test_iconOniconOff (t) {
    	t.plan(6);
    	var map = new OpenLayers.Map("map"),
			navControl = new OpenLayers.Control.Navigation({autoActivate: true}),
			zbControl = new OpenLayers.Control.ZoomBox(),
    		panel = new OpenLayers.Control.Panel({defaultControl: navControl}),
    		navActiveClass, navInactiveClass, zbActiveClass, zbInactiveClass;
    	
    	panel.addControls([navControl, zbControl]);
    	map.addControl(panel);
    	
     	navControl.panel_div.className += " foo";
    	zbControl.panel_div.className = "bar " + zbControl.panel_div.className;
    	
    	t.eq(navControl.panel_div.className, "olControlNavigationItemActive olButton foo",
    		"defaultControl className is set to [displayClass]Active on panel instantiation");
    	t.eq(zbControl.panel_div.className, "bar olControlZoomBoxItemInactive olButton",
        	"non-defaultControl className is set to [displayClass]Inactive on panel instantiation");
    	
    	panel.activateControl(zbControl);
    	
    	t.eq(zbControl.panel_div.className, "bar olControlZoomBoxItemActive olButton",
    		"active control class name with preceding secondary class name is set to [displayClass]Active");
    	t.eq(navControl.panel_div.className, "olControlNavigationItemInactive olButton foo",
    		"inactive control class name with trailing secondary class name is set to [displayClass]Inactive");
    	
    	panel.activateControl(navControl);
    	
    	t.eq(navControl.panel_div.className, "olControlNavigationItemActive olButton foo",
        		"active control class name with trailing secondary class name is set to [displayClass]Active");
    	t.eq(zbControl.panel_div.className, "bar olControlZoomBoxItemInactive olButton",
        		"inactive control class name with preceding secondary class name is set to [displayClass]Inactive");
    	
    	map.destroy();
    }
    
  </script>
</head>
<body>
    <div id="map" style="width: 1024px; height: 512px;"/>
</body>
</html>
